<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="el-icon-s-order"></i>
        <span>{{ $t("configure.template_library") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <el-dialog
        :title="title"
        :visible.sync="display"
        :before-close="handleClose"
        width="60%"
      >
        <import-form @click="handleClose" v-if="type == 'import'"></import-form>
        <issue-form
          @click="handleClose"
          v-else-if="type == 'issue'"
        ></issue-form>
        <configure-table
          :templateId="templateId"
          :form="form"
          v-else-if="type == 'configure'"
          @click="handleClose"
        ></configure-table>
      </el-dialog>
      <ky-table
        :search_data="search_data"
        :getData="getMigrateTemplates"
        :search_criteria="search_criteria"
        ref="table"
      >
        <template v-slot:table-action>
          <authorization-button class="kylin-item-button" @click="handleImport" name="MigrateTemplateItem:create"
            >{{ $t("import") }}
          </authorization-button>
        </template>
        <template v-slot:table>
          <el-table-column prop="name" :label="$t('configure.template_name')">
          </el-table-column>
          <el-table-column
            prop="applicationName"
            :label="$t('configure.application_name')"
          >
          </el-table-column>
          <el-table-column :label="$t('action')">
            <template slot-scope="scope">
              <authorization-button
                @click.native.prevent="handleIssue(scope.row)"
                type="text"
                size="medium"
              >
                {{ $t("configure.issue") }}
              </authorization-button>
              <el-popconfirm
                :title="$t('configure.migrate_template_delete_confirm')"
                @confirm="handleDelete(scope.row)"
                icon-color="red"
                cancel-button-type="default"
                confirm-button-type="danger"
              >
                <authorization-button
                  type="text"
                  slot="reference"
                  size="medium"
                  class="kylin-delete"
                  name="Migratetemplate:delete"
                >
                  {{ $t("delete") }}
                </authorization-button>
              </el-popconfirm>
              <authorization-button
                @click.native.prevent="handleExport(scope.row)"
                type="text"
                size="medium"
                name="Migratetemplate:excelDownload"
              >
                {{ $t("export") }}
              </authorization-button>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import importForm from "./form/import.vue";
import configureTable from "./form/configureTable.vue";
import issueForm from "./form/issueForm.vue";
import AuthorizationButton from "@/components/AuthorizationButton";
import { download } from "@/utils";
import {
  getMigrateTemplates,
  deleteMigrateTemplates,
  exportMigrateTemplate,
} from "@/api/migrate_template";
export default {
  name: "template_library",
  components: {
    Page,
    kyTable,
    importForm,
    issueForm,
    configureTable,
    AuthorizationButton
  },
  data() {
    return {
      display: false,
      showSelect: true,
      search_criteria: {
        sortBy: "id",
        sortOrder: "desc",
      },
      title: "",
      type: "",
      form: {},
      search_data: {
        name: {
          name: "configure.template_name",
          type: "text",
        },
        applicationName: {
          name: "configure.application_name",
          type: "text",
        },
      },
      templateId: 0,
    };
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  methods: {
    getMigrateTemplates,
    handleClose(type, form) {
      if (type === "success") {
        this.display = false;
        this.type = "";
        this.title = "";
        this.form = {};
        this.templateId = 0;
        this.$refs.table.handleSearch();
      } else if (type === "configure") {
        this.type = "configure";
        this.title = this.$t("configure.different_report");
        this.form = form;
      } else {
        this.display = false;
        this.type = "";
        this.title = "";
        this.form = {};
        this.templateId = 0;
      }
    },
    handleIssue(row) {
      this.display = true;
      this.title = this.$t("configure.issue");
      this.type = "issue";
      this.templateId = row.id;
    },
    handleDelete(row) {
      deleteMigrateTemplates([row.id]).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
        this.$refs.table.handleSearch();
      });
    },
    handleExport(row) {
      exportMigrateTemplate({ id: row.id }).then((res) => {
        if (res.data.code) {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          download(res, row.name, "json");
        }
      });
    },
    handleImport() {
      this.display = true;
      this.title = this.$t("configure.import_template");
      this.type = "import";
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
  width: 134px;
}
.label {
  font-weight: 600;
  margin-right: 10px;
}
</style>